<template>
    <div class='x'><div>
        <div v-if="goods" class="item">
            <!--<div class="item-name">{{goods.name}}</div>-->
            <div v-for="food in goods.foods" class="food">
                <img :src="food.icon" class="food-icon">
                <div class="food-text">
                    <span class="food-name">{{food.name}}</span><br>
                    <span class="food-sellcount">月售{{food.sellCount}}份</span> <span class="food-rating">好评率{{food.rating}}%</span><br>
                    <span class="food-price">￥{{food.price}}</span> <span v-if="food.oldPrice" class="food-oldprice">￥{{food.oldPrice}}</span>
                </div>
            </div>
        </div>
    </div></div>
</template>

<script>
    export default {
        name: "goodsItem",
        props:{
            goods:Object,
            index:Number,
        }
    }
</script>

<style scoped lang="stylus">
    @import "~@styles/variables.styl"
    .x
        flex:1
    .item
        .item-name
            color:gray
            padding:$padding*0.5
            border-left:2px solid $borderColor
        .food
            display:flex
            padding:$padding
            background-color:white
            border-bottom:1px solid $borderColor
            &:last-child
                border-width:0
            .food-icon
                width:$fontSize*4
                height:$fontSize*4
            .food-text
                line-height:$fontSize*1.2
                margin-left:$padding*0.5
                .food-name
                    font-size:$fontSize*1.2
                .food-sellcount, .food-rating
                    color:gray
                    font-size:$fontSize*0.8
                .food-price, .food-oldprice
                    color:red

</style>